<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=0">
    <!-- <meta name='format-detection' content='telephone=no'/> -->
    <meta itemprop="name" content='天气'/>
    <meta itemprop='image' content=''/>
    <style type='text/css'>
        html,body,ul,ol,img,p,input,button{margin:0;padding:0}
        #bgCanvas{
            background-color:#133;
            width: 100%;
            position: absolute;
            top: 0;
            left:0;
            height: 100%;
            z-index:-1;
        }
        #chartCanvas{
            width: 100%;
            z-index:1;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="bgCanvas"></canvas>
    </div>
    <div>

        <canvas id="chartCanvas"></canvas>
    </div>
    <script>
        window.requestAnimFrame =
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 30);
        };

        var canvas = document.getElementById('chartCanvas');
        drawChart(canvas);

        var gravity = 0.2;
        var ctx = null;
        var drops = [];
        var bounces = [];
        
        var Vector  = function(x,y){
            this.x = x||0;
            this.y = y||0;
        }
        Vector.prototype.add = function(v){
            if(v.x !=null && v.y !=null){
                this.x += v.x;
                this.y += v.y;
            }else{
                this.x += v;
                this.y += v;
            }
            return this;
        }
        Vector.prototype.copy = function(){
            return new Vector(this.x,this.y);
        }
        var Drop = function(){
            var randomEdge = Math.random()*2;
            if(randomEdge>1){
                this.pos = new Vector(50+Math.random()*canvas.width,-80);
            }else{

                this.pos = new Vector(0, Math.random() * canvas.height);
            }
            this.radius = (OPTS.size_range[0] + Math.random() * OPTS.size_range[1]) *DPR;//形状.
            this.speed = (OPTS.speed[0] + Math.random() * OPTS.speed[1]) *DPR;//随机速度.
            this.prev = this.pos;
            //得到弧度.用来计算xy速度
            var eachAnger =  0.017453293; //2π/360
            wind_anger = OPTS.wind_direction * eachAnger;
            //速度分解
            speed_x =  this.speed * Math.cos(wind_anger);
            speed_y = - this.speed * Math.sin(wind_anger);
            this.vel = new Vector(speed_x,speed_y);
        };
        Drop.prototype.update = function(){
            //更新位置
            this.prev = this.pos.copy();
            if (OPTS.hasGravity) {
                this.vel.y += gravity;//y向的速度雨来越大,也就是抛物线
            }
            this.pos.add(this.vel);
        }
        Drop.prototype.draw = function(){
            ctx.beginPath();
            ctx.moveTo(this.pos.x, this.pos.y);
            if(OPTS.type =="rain"){
                   ctx.moveTo(this.prev.x, this.prev.y);
                   var ax = Math.abs(this.radius * Math.cos(wind_anger));
                   var ay = Math.abs(this.radius * Math.sin(wind_anger));
                   ctx.bezierCurveTo(this.pos.x + ax, this.pos.y + ay, this.prev.x + ax , this.prev.y + ay, this.pos.x, this.pos.y);
                   ctx.stroke();

              //另一种是snow--即圆形     
              }else{
                     ctx.moveTo(this.pos.x, this.pos.y);
                     ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI*2);
                     ctx.fill();
              }
        }
        var Bounce = function(x,y){
            var dist = Math.random()*7;
            var angle = Math.PI + Math.random()*Math.PI;
            this.pos = new Vector(x,y);
            this.radius = 0.2+Math.random()*0.8;
            this.vel = new Vector(Math.cos(angle)*dist,Math.sin(angle)*dist);
        }
        Bounce.prototype.update = function(){
            //给y轴添加重力,x轴速度不变,出来就是抛物线.
            this.vel.y+=gravity;
            this.vel.x *= 0.95;//不断的去减弱x,y方向的速度.
            this.vel.y *= 0.95;//
            //对x,y逐渐减弱.更自然.
            this.pos.add(this.vel);
        };
        Bounce.prototype.draw = function(){
              ctx.beginPath();
              ctx.arc(this.pos.x, this.pos.y, this.radius*DPR, 0, Math.PI * 2);
              ctx.fill();
        }
        function update1(){
            var d = new Date;
            var drop = drops[0];
            drop.update();
            drop.draw();
            var bounce = bounces[0];
            bounce.update();
            bounce.draw();
            requestAnimFrame(update);
        }
        function update(){
            var d = new Date;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            var i = drops.length;
            while(i--){
                var drop = drops[i];
                drop.update();
                if(drop.pos.y>=canvas.height){
                    if(OPTS.hasBounce){
                        var n = Math.round(4+Math.random()*4);
                        while(n--){
                            bounces.push(new Bounce(drop.pos.x,canvas.height));
                        }
                    }
                    drops.splice(i,1);
                }
                drop.draw();
            }
            if(OPTS.hasBounce){
                var i = bounces.length;
                while(i--){
                    var bounce = bounces[i];
                    bounce.update();
                    bounce.draw();
                    if(bounce.pos.y>canvas.height){
                        bounces.splice(i,1);
                    }
                }
            }
            if(drops.length<OPTS.maxNum){
                if(Math.random()<drop_chance){
                    var i = 0;
                    var len = OPTS.numLevel;
                    for(;i<len;i++){
                        drops.push(new Drop());
                    }
                }
            }
            requestAnimFrame(update);
        }
        function init(opts){
            OPTS = opts;
            OPTS.maxNum = 50;
            OPTS.numLevel = 10;
            canvas = document.getElementById(opts.id);
            ctx = canvas.getContext('2d');
            DPR = window.devicePixelRatio;
            canvas.width = canvas.clientWidth*DPR;
            canvas.height = canvas.clientHeight*DPR;
            drop_chance = 0.4;
            setStyle(ctx);
            // drops.push(new Drop());
            // bounces.push(new Bounce(200,600));
            requestAnimFrame(update);
        }


        init({
            id:'bgCanvas',
            type: "rain",  // drop类型，有rain or snow
            speed : [0.4,2.5], //速度范围
            size_range: [0.5,1.5],//大小半径范围
            hasBounce: true, //是否有反弹效果or false,
            wind_direction: -105, //角度
            hasGravity: true //是否有重力考虑
        });
        function setStyle(ctx){
            if(OPTS.type=='rain'){
                ctx.lineWidth = 1*DPR;
                ctx.strokeStyle = 'rgba(223,223,223,0.6)';
                ctx.fillStyle = 'rgba(223,223,223,0.6)';

            }else{
                ctx.lineWidth = 3*DPR;
                ctx.strokeStyle = 'rgba(254,254,254,0.8)';
                ctx.fillStyle = 'rgba(254,254,254,0.8)';
            }
        }

        function drawChart(canvas){
            var cxt = canvas.getContext('2d');

            var devicePixelRatio = window.devicePixelRatio || 1;
            var backingStorePixelRatio = cxt.webkitBackingStorePixelRatio ||
            cxt.mozBackingStorePixelRatio ||
            cxt.msBackingStorePixelRatio ||
            cxt.oBackingStorePixelRatio ||
            cxt.backingStorePixelRatio || 1;
            var ratio = devicePixelRatio / backingStorePixelRatio;
            canvas.width = canvas.clientWidth*ratio;
            canvas.height = canvas.clientHeight*ratio;

            cxt.scale(ratio,ratio);

            drawLine([29,29,25,22,23],12,30);
            drawLine([19,19,19,15,15],12,150);
            // drawLine([30,32,34,34,33],10,200);
            // drawLine([26,26,26,25,27],10,320);
            function drawLine(data,distanceScale,originY){
                var temperature = data;//温度
                var paddingLeft = 30;//边距
                var distanceScale =distanceScale||12;
                var originY = (temperature.concat([]).sort()[temperature.length-1])*distanceScale+originY;//y轴的起始位置.最大值+起始的位置.
                var deviceWidth = canvas.width/ratio;//区域的总宽度
                cxt.lineWidth = 2;
                var splitCount = temperature.length;
                var splitWidth = (-paddingLeft*2+deviceWidth)/(splitCount-1);
                for(var i=0;i<splitCount;i++){
                    if(i==splitCount){
                        break;
                    }
                    var pointStart = {x:i*splitWidth+paddingLeft,y:originY-temperature[i]*distanceScale};
                    var pointEnd = {x:(1+i)*splitWidth+paddingLeft,y:originY-temperature[i+1]*distanceScale};
                    cxt.lineCap="butt";
                    cxt.fillStyle = 'white';
                    cxt.font = "15px sans-serif";
                    cxt.beginPath();//绘图上下文的有效区域,又来屏蔽对之前路径的绘制,防止重复操作.
                    var text = temperature[i]+'°';
                    var textWidth = cxt.measureText(text).width;
                    cxt.fillText(text,-5+pointStart.x,pointStart.y-10);
                    cxt.moveTo(pointStart.x,pointStart.y);
                    cxt.lineTo(pointEnd.x,pointEnd.y);
                    cxt.strokeStyle = 'white';
                    cxt.stroke();

                    cxt.beginPath();
                    // cxt.lineCap="square";
                    // cxt.lineCap="round";
                    cxt.arc(pointStart.x,pointStart.y,3,0,Math.PI*2,true);
                    cxt.fill();
                }
            }
        }

    </script>
</body>
</html>